<div ng-if="controller.client">

  <h1>
    {$ controller.client.value.os_info.value.fqdn.value $}
    <span>{$ controller.clientId $}</span>
  </h1>

  <div ng-if="!readOnly">
    <grr-check-client-access client-id="controller.clientId" no-redirect="true"
                             out-has-access="controller.hasClientAccess">
    </grr-check-client-access>

    <div class="no-approval alert alert-danger alert-block"
         ng-if="controller.hasClientAccess !== undefined && !controller.hasClientAccess">
      <i class="fa fa-warning"></i> You do not have an <b>approval</b> for this client. <br/>

      <button name="requestApproval" class="btn btn-default"
              ng-click="controller.requestApproval()">Request Approval</button>
    </div>
  </div>

  <!-- Toolbar -->
  <div class="client-actions">

    <button ng-if="!readOnly"
            class="btn btn-default"
            ng-click="controller.interrogate()"
            ng-disabled="!controller.hasClientAccess || controller.interrogateOperationId">
      <i class="fa fa-search-plus"
         ng-if="!controller.interrogateOperationId"></i>
      <i class="fa fa-spinner fa-spin fa-fw"
          ng-if="controller.interrogateOperationId"></i>
      Interrogate
    </button>

    <div class="btn-group">
      <label class="btn btn-default" uib-btn-radio="false" ng-model="controller.showDetails">
        Overview
      </label>
      <label class="btn btn-default" uib-btn-radio="true" ng-model="controller.showDetails">
        Full details
      </label>
    </div>

    <grr-version-dropdown version="controller.clientVersion"
                          url="controller.clientVersionUrl">
    </grr-version-dropdown>

    <div class="clearfix"></div>
  </div>


  <!-- Client Details -->
  <div class="client-overview" ng-if="!controller.showDetails"
       grr-force-refresh refresh-trigger="controller.client">

    <!-- Overview -->
    <div class="client-info-wrapup">
      <dt>OS</dt>
      <dd>
        <div ng-if="controller.client.value.os_info.value.system">
          <i class="fa fa-linux" ng-if="controller.client.value.os_info.value.system.value == 'Linux'"></i>
          <i class="fa fa-windows" ng-if="controller.client.value.os_info.value.system.value == 'Windows'"></i>
          <i class="fa fa-apple" ng-if="controller.client.value.os_info.value.system.value == 'Apple'"></i>

          <grr-semantic-value value="controller.client.value.os_info.value.system"></grr-semantic-value>
          <span ng-if="controller.client.value.os_info.value.system.value && (controller.client.value.os_info.value.release.value || controller.client.value.os_info.value.version.value)">,</span>
          <grr-semantic-value value="controller.client.value.os_info.value.release"></grr-semantic-value>
          <grr-semantic-value value="controller.client.value.os_info.value.version"></grr-semantic-value>
        </div>

        <div ng-if="!controller.client.value.os_info.value.system">
          -
        </div>
      </dd>

      <dt>Last Local Clock</dt>
      <dd>
        <i class="fa fa-history"></i>
        <div ng-if="!controller.client.value.last_clock">-</div>
        <grr-semantic-value value="controller.client.value.last_clock"
                            ng-if="controller.client.value.last_clock">
        </grr-semantic-value>
      </dd>

      <dt>GRR Client Version</dt>
      <dd>
        <div ng-if="!controller.client.value.agent_info.value.client_version.value">-</div>
        <grr-semantic-value value="controller.client.value.agent_info.value.client_version.value"
                            ng-if="controller.client.value.agent_info.value.client_version.value">
        </grr-semantic-value>
      </dd>

      <dt>Architecture</dt>
      <dd>
        <div ng-if="!controller.client.value.os_info.value.machine">-</div>
        <grr-semantic-value value="controller.client.value.os_info.value.machine"
                            ng-if="controller.client.value.os_info.value.machine">
        </grr-semantic-value>
      </dd>

      <dt>Kernel</dt>
      <dd>
        <div ng-if="!controller.client.value.os_info.value.kernel">-</div>
        <grr-semantic-value value="controller.client.value.os_info.value.kernel"
                            ng-if="controller.client.value.os_info.value.kernel">
        </grr-semantic-value>
      </dd>

      <dt>Memory Size</dt>
      <dd>
        <div ng-if="!controller.client.value.memory_size">-</div>
        <grr-semantic-value value="controller.client.value.memory_size"
                            ng-if="controller.client.value.memory_size">
        </grr-semantic-value>
      </dd>

      <dt>Labels</dt>
      <dd>
        <span ng-if="!controller.client.value.labels.length">
          No labels assigned.
        </span>

        <ul ng-if="controller.client.value.labels.length" class="label-list">
          <li ng-repeat="label in controller.client.value.labels">
            <span class="label label-success">{$ label.value.name.value $}</span>
          </li>
        </ul>
      </dd>

      <dt>Users</dt>
      <dd>
        <div ng-if="!controller.client.value.users.length">-</div>

        <ul class="user-list">
          <li ng-repeat="user in controller.client.value.users">
            <i class="fa fa-user"></i> {$ ::user.value.full_name.value $} ({$ ::user.value.username.value $})
          </li>
        </ul>
      </dd>
    </div>

    <!-- Info Tiles -->
    <div class="client-info-details">

      <div class="col-md-12 col-lg-6">

        <section>
          <h2><i class="fa fa-clock-o"></i> Timestamps</h2>

          <table class="properties">
            <tr>
              <th>OS installation time</th>
              <td ng-if="controller.client.value.os_info.value.install_date">
                <grr-semantic-value value="controller.client.value.os_info.value.install_date">
                </grr-semantic-value>
                <span class="time-since">{$ (controller.client.value.os_info.value.install_date.value | grrTimeSince) $}</span>
              </td>
              <td ng-if="!controller.client.value.os_info.value.install_date">
                -
              </td>
            </tr>
            <tr>
              <th>First seen</th>
              <td ng-if="controller.client.value.first_seen_at">
                <grr-semantic-value value="controller.client.value.first_seen_at">
                </grr-semantic-value>
                <span class="time-since">{$ controller.client.value.first_seen_at.value | grrTimeSince $}</span>
              </td>
              <td ng-if="!controller.client.value.first_seen_at">
                -
              </td>
            </tr>
            <tr>
              <th>Last booted</th>
              <td ng-if="controller.client.value.last_booted_at">
                <grr-semantic-value value="controller.client.value.last_booted_at">
                </grr-semantic-value>
                <span class="time-since">{$ controller.client.value.last_booted_at.value | grrTimeSince $}</span>
              </td>
              <td ng-if="!controller.client.value.last_booted_at">
                -
              </td>
            </tr>
            <tr>
              <th>Last seen</th>
              <td ng-if="controller.client.value.last_seen_at">
                <grr-semantic-value value="controller.client.value.last_seen_at">
                </grr-semantic-value>
                <span class="time-since">{$ controller.client.value.last_seen_at.value | grrTimeSince $}</span>
              </td>
              <td ng-if="!controller.client.value.last_seen_at">
                -
              </td>
            </tr>
          </table>
        </section>
      </div>

      <div class="col-md-12 col-lg-6">
        <section>
          <h2><i class="fa fa-exchange"></i> Interfaces</h2>

          <div ng-if="!controller.client.value.interfaces"
               class="no-section-info">
            No interface information available.
          </div>

          <table ng-if="controller.client.value.interfaces"
                 class="full-section-info">
            <thead>
              <tr>
                <th>IF Name</th>
                <th>Mac Address</th>
                <th>Addresses</th>
              </tr>
            </thead>
            <tr ng-repeat="interface in controller.client.value.interfaces">
              <td>
                {$ ::interface.value.ifname.value $}
              </td>
              <td class="mac-address">
                <grr-semantic-value value="interface.value.mac_address"></grr-semantic-value>
              </td>
              <td class="mac-address">
                <ul>
                  <li ng-repeat="address in interface.value.addresses">
                    <grr-semantic-value value="address"></grr-semantic-value>
                  </li>
                </ul>
              </td>
            </tr>
          </table>
        </section>
      </div>
    </div>
  </div>

  <!-- Shows the full view on the client with all properties and in full details -->
  <div class="client-details"
       ng-if="controller.showDetails"
       grr-force-refresh refresh-trigger="controller.client">
    <grr-semantic-versioned-proto
      client="::controller.client"
      value="::controller.client"
      on-field-click="controller.showHistoryDialog(fieldPath)"
      history-depth="2">
    </grr-semantic-versioned-proto>
  </div>
</div>
